import React, { Component } from 'react';
import classnames from 'classnames';
import { Link } from 'react-router';
import { inject, observer } from 'mobx-react';
import { Toast, ListView, Picker, Flex, SegmentedControl } from 'antd-mobile'
import { createForm } from 'rc-form';
import _ from 'lodash';
import Top from 'components/top'
import Ajax from 'lib/Ajax'
import List from 'mixin/list'

@inject('appStore', 'languageStore')
@observer
class ModuleName extends List {
  constructor(props) {
    super(props);
    this.listApi = '/interview/list';
  }

  // componentDidMount(){
  //   this.fetchList(1)
  // }

  renderRow = (rowData, sectionID, rowID)=>{
    console.log(rowData, sectionID, rowID);
    const { imgBaseUrl, commonData } = this.props.appStore;
    return (
        <div key={rowID} className="activity-item">
          <Link to={`/interview/${rowData.interviewId}`}>
            <img src={`${imgBaseUrl}${rowData.teacherDTO.coverImg}`} alt=""/>
            <div className="row-text">
              <div className="t">{rowData.title}</div>
              <div className="b">
                {rowData.teacherDTO.name}
              </div>
              <div className="b">
                <span style={{marginRight: '.2rem'}}>{rowData.teacherDTO.school}</span>
                <span>{rowData.teacherDTO.major}</span>
              </div>
            </div>
          </Link>
        </div>
      );
  }

  render() {
    const pageData = this.props.languageStore.getPageData('interview');
    const { imgBaseUrl, commonData } = this.props.appStore;
    const { isLoading, currentPage, pageCount } = this.state;
    return (
      <div className="interview">
        <Top
          title={pageData.title}
        />
        <div className="activity">
					<div className="am-segment" style={{padding: '.3rem .2rem'}}>
						{
							(commonData.interviewTypeEn||[]).map(item => {
								return (<div className={classnames('am-segment-item', {'am-segment-item-selected': item.code == this.searchOption.categoryId})} key={item.code} onClick={this.doSearch.bind(this, {categoryId: item.code})}>{item.mean}</div>)
							})
						}
					</div>
          <div className="list">
            <ListView ref="lv"
              dataSource={this.state.dataSource}
              renderFooter={this.renderFooter}
              renderRow={this.renderRow}
              className="fortest"
              pageSize={4}
              scrollRenderAheadDistance={500}
              scrollEventThrottle={20}
              onScroll={() => { console.log('scroll'); }}
              onEndReached={this.onEndReached}
              onEndReachedThreshold={10}
              stickyHeader
            />
          </div>
        </div>
      </div>
    )
  }
}


module.exports = ModuleName
